<template>
  <div class="data_model_index">
    <!-- 数据模型 -->
    <div class="data_model_top_search_input">
      <div class="search">
        <p style="display: flex">
          <el-select v-model="value" placeholder="请选择" clearable filterable @blur="selectBlur" @focus="handleClickSearch"
            @clear="selectClear" @change="selectChange">
            <el-option v-for="(item, index) in options" :key="index" :label="item.searchName" :value="item.searchName" />
          </el-select>
          <el-button @click="selectsearch" slot="append" icon="el-icon-search"></el-button>
        </p>
      </div>
    </div>
    <div class="data_model_top_gerf_dev">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <allView ref="AllView" @modeltype="modeltype" :valueprops="searchvalue" />
        </el-tab-pane>
        <el-tab-pane label="数据模型" name="second">
          <dataModel ref="secondRef" :valueprops="searchvalue" />
        </el-tab-pane>
        <el-tab-pane label="字段" name="third">
          <fieldview ref="thirdRef" :valueprops="searchvalue" />
        </el-tab-pane>
        <!-- <el-tab-pane label="标签" name="fourth"><labelview /> </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { getsearchCount, getSearchAll } from '@/api/modelDataApi/index'
import { allView, dataModel, fieldview, labelview } from './component/index.js'
export default {
  components: {
    allView,
    dataModel,
    fieldview,
    labelview,
  },
  data() {
    return {
      type: 'first',
      // 输入框搜索条件
      options: [],
      // 输入框搜索model
      value: '实时信息',
      searchvalue: '',
      //标签页
      activeName: 'first',
    }
  },
  mounted() {
    this.handleClickSearch()
  },
  methods: {
    handleClickSearch() {
      getsearchCount().then((res) => {
        this.options = res.data
      })
    },
    selectBlur(e) {
      // 意见类型
      if (e.target.value !== '') {
        this.value = e.target.value
        this.$forceUpdate() // 强制更新
      }
    },
    selectClear() {
      this.value = ''
      this.$forceUpdate()
    },
    selectChange(val) {
      this.value = val
      this.$forceUpdate()
    },
    selectsearch() {

      if (this.type == 'first') {
        this.$refs.AllView.getArray(this.value)
      } else if (this.type == 'second') {
        this.$refs.secondRef.refFun(this.value)
      } else if (this.type == 'third') {
        this.$refs.thirdRef.refFun(this.value)
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    handleClick(tab, event) {
      this.type = tab.name
      if (tab.name == 'first') {
        this.$refs.AllView.getArray(this.value)
      } else if (tab.name == 'second') {
        this.$refs.secondRef.refFun(this.value)
      } else if (tab.name == 'third') {
        this.$refs.thirdRef.refFun(this.value)
      }
    },
    modeltype(item) {
      this.activeName = item
      if (item == 'second') {
        this.$refs.secondRef.refFun(this.value)
      } else if (item == 'third') {
        this.$refs.thirdRef.refFun(this.value)
      }
    },
  },
}
</script>
<style scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.data_model_index {
  overflow: auto;
  padding: 20px 20px;
}

.data_model_top_search_input {
  width: 100%;
  height: 15vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.data_model_top_gerf_dev {
  width: 100%;
  height: 70vh;
}

.search {
  width: 60%;
  height: 80%;
}

.data_model_top_tag {
  width: 100%;
}
</style>
